<template>
    <div class="dynamic">
        <el-carousel indicator-position="none" :interval="5000" arrow="always" height="3rem">
            <el-carousel-item v-for="(item, index) in imgArray" :key="item">
                <img :src="item.fileUrl" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>

import { getImgInfo } from '@/apis/imgInfo/getImgInfo';
import { ref } from 'vue';

const imgArray = ref()


const fetchImgInfo = async () => {
    const res = await getImgInfo()
    imgArray.value = res.data.data
    console.log(res.data)
}

fetchImgInfo()


</script>

<style lang="less" scoped>
.dynamic {
    width: 4.9875rem;
    height: 3.8375rem;
    background-image: url(../assets/imgs/icon_cydt.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: .75rem .25rem .25rem;
    box-sizing: border-box;

    img {
        margin-top: 0.125rem;
        width: 100%;
        height: 2.75rem;
    }
}
</style>